<template>

	<view class="options">
		<view class="options-list">
			<view class="options-list-li" v-for="(o,index) in data">
				<image class="options-list-li-image" :src="o.image" mode=""></image>
				<text class="options-list-li-name">{{o.name}}</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	defineProps(["data"])
</script>

<style scoped lang="scss">
	$gap: 25rpx;
	.options {
		background-color: white;
		border-radius: 12px;
		width: 94%;
		margin: $gap 3%;
		margin-top: 0rpx;
	}

	.options-list {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 20rpx;
	}

	.options-list-li {
		width: 20%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0rpx;
		font-size: 25rpx;

	}

	.options-list-li-image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}

	.options-list-li-name {
		font-size: 24rpx;
	}
</style>